<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			<el-main>
			<div v-if="flag">
				<h3>会员列表</h3>
				<div class="item">
					<el-form-item label="会员信息" label-width="110">
						<el-input
						style="width: 240px;"
						v-model="vipInfo"
						placeholder="请输入会员昵称或手机号"
						></el-input>
						<el-button
						type="primary"
						@click="searchback"
						>搜索</el-button>
						<el-button
						@click="replay"
						>重置</el-button>
					</el-form-item>
					
				</div>
				<el-table :data="tableData" style="width: 100%"  height="60vh">
				 
				    <el-table-column label="会员信息">
						<template #default="{ row }">
							<img src="../../public/头像.png" class="phsty"/>
							{{row.userName}}
						</template>
					</el-table-column>
					<el-table-column label="收否是分销商">
						<template #default="{ row }">
							{{row.isDistributor}}
						</template>
					</el-table-column>
					<el-table-column label="上级推荐人">
						<template #default="{ row }">
							{{row.superior}}
							<el-icon style="margin-left: 10px;"><EditPen @click="updatersuperior(row)" /></el-icon>
						</template>
					</el-table-column>
					<el-table-column prop="costNum" label="消费次数"></el-table-column>
					<el-table-column label="消费金额">
						<template #default="{ row }">
							{{row.cost}}￥
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template #default="{ row }">
							<span class="mya" @click="detal(row)">详情</span>
						</template>
					</el-table-column>
				</el-table>
				
				
				<!-- 变更上级分销商 -->
				<el-dialog v-model="dialogFormVisible2" title="变更上级分销商" width="800">
				    <el-form>
				      <el-form-item label="分销商信息">
						<el-input placeholder="请输入分销商昵称或者手机" style="width:220px ;" v-model="superinfo"></el-input>
						<el-button type="primary" @click="searchsuperior">搜索</el-button>
						<el-button  @click="superreset">重置</el-button>
				      </el-form-item>
					  <el-table :data="traderTable" style="width: 100%">
					  	<el-table-column prop="userName" label="分销商信息" width="160" />
					  	<el-table-column prop="distributionLevelId" label="分销商等级" width="160" />
						<el-table-column prop="distributiorStatus" label="当前状态" width="160" />
						<el-table-column  label="操作">
					  		<template #default="{row}">
					  			<el-button @click="makechange(row)" type="primary">选择</el-button>
					  		</template>
					  	</el-table-column>
					  </el-table>
				    </el-form>
					<el-pagination
						layout="prev,pager,next"
						:page-count="total1"
						:page-size="pageSize"
						v-model:current-page="pageIndex"	
						@current-change="changePage1"
					></el-pagination>
				  </el-dialog>
				
				<el-dialog v-model="dialogFormVisible3" title="提示" width="500">
				    <el-form>
						<p style="text-align: center;">确认要变更上级分销商吗?</p>
				    </el-form>
					<template #footer>
					  <div class="dialog-footer">
					    <el-button @click="dialogFormVisible3 = false">取消</el-button>
					    <el-button type="primary" @click="makesuer">
					      确定
					    </el-button>
					  </div>
					</template>
				  </el-dialog>
				
				
					<el-pagination
						layout="prev,pager,next"
						:page-count="total"
						:page-size="pageSize"
						v-model:current-page="pageIndex"	
						@current-change="changePage"
					></el-pagination>
			</div>
			<VipDetails v-else  @update-message="handleMessageUpdate"></VipDetails> 
			</el-main>
		</el-container>
	</div>
</template>
<script setup>
	import Header from "@/components/Header.vue"
	import { ref,reactive,onMounted} from 'vue'
	import {
			disviplist,
			updatasuper,
			updatasuperTrader,
			supertradersearch,
			updatesuper,
			disviplistsearch
		} from "@/api";
	import { EditPen } from '@element-plus/icons-vue'
	import VipDetails from '@/components/VipDetails.vue';
	let pageIndex=ref(1);
	let pageSize=6;
	let total=ref(0)
	let total1=ref(0)
	
	const tableData = ref([])
	//获取会员列表
	const getdisviplist = async ()=>{
		let res=await disviplist({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
			
		})
		// console.log("分销",res)
		tableData.value=res.list
		total.value=res.pageCount
	}
	
	//点击详情
	let flag=ref(true)
	function handleMessageUpdate (newMessage) {
		flag.value = newMessage;
	}
	const detal = (r)=>{
		flag.value=false
		sessionStorage.setItem("userId",r.userId)
	}
	
	
	//会员列表搜索
	const vipInfo=ref()
	const searchback= async()=>{
		let res=await disviplistsearch ({
			"info": vipInfo.value,
			"pageIndex":pageIndex.value,
			"pageSize":pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
		})
		tableData.value=res.list
		total.value=res.pageCount
		// console.log(res);
		 
	}
	const replay= ()=>{
		vipInfo.value='';
		getdisviplist()
	}

	const superinfo=ref()
	//可选上级分销商列表
	const dialogFormVisible2=ref(false)
	const traderTable=ref([])
	const updatersuperior = async (row)=>{
		superinfo.value=''
		sessionStorage.setItem("nowuserId",row.userId)
		dialogFormVisible2.value=true
		// console.log(row);
		let res=await updatasuper({
			distributorId: row.distributorId,
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
		})
		traderTable.value=res.list
		total1.value=res.pageCount
		// console.log("可选上级分销商",res)
	}
	//搜索可选上级分销
	
	const searchsuperior = async ()=>{
		let res=await supertradersearch({
			"info": superinfo.value,
			"pageIndex":pageIndex.value,
			"pageSize":pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
		})
		traderTable.value=res.list
		// console.log("搜索到的可选上级分销商",res)
	}
	//重置
	const superreset=async ()=>{
		superinfo.value='';
		let res=await supertradersearch({
			"info": superinfo.value,
			"pageIndex":pageIndex.value,
			"pageSize":pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
		})
		traderTable.value=res.list
	}
	
	//点击变更
	const dialogFormVisible3=ref(false)
	const makechange=(row)=>{
		sessionStorage.setItem("superuserId",row.userId)
		dialogFormVisible2.value=false
		dialogFormVisible3.value=true
	}
	
	//点击变更的确认
	const makesuer=async (row)=>{
		let res=await updatesuper({
			userId:Number(sessionStorage.getItem("nowuserId")),
			superior:Number(sessionStorage.getItem("superuserId")),
		})
		// console.log("已修改选定",res)
		getdisviplist()
		dialogFormVisible3.value=false
	}
	
	//获取分页
	const changePage=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		getdisviplist()
	}
	const changePage1= async(page)=>{
		pageIndex.value=page
		let res=await updatasuper({
			distributorId:sessionStorage.getItem("disID") ,
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
		})
		traderTable.value=res.list
		total1.value=res.pageCount
	}
	
	onMounted(() => {
		getdisviplist()
	})
	
</script>
<style scoped lang="less">
	:deep(.el-table .el-table__cell){
	    text-align: center !important;
	}
	.common-layout {
		background: #f2f3f5;

		.el-header {
			padding: 0 !important;
			height: 10vh;
		}

		.el-main {
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	h3,.item{
		margin-bottom: 20px;
		// margin-top: 20px;
		// margin-left: 50px;
	}
	.el-button{
		margin-left: 15px;
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
		cursor: pointer;
	}
	.phsty{
		width: 25px;
		
	}
</style>
